<template>
    <rx-fit style="padding-top:5px;">
        <template #middle>
          <a-table :bordered="true" :columns="taskNodeUserColumns" :dataSource="taskNodeUsers" :defaultExpandAllRows="true"
                   :pagination="false"
                   :rowKey="record => record.nodeId">
            <template #bodyCell="{ text, column, record }">
              <template v-if="column.key === 'configExecutors'">
                <rx-text-list v-if="record.multiInstance!='batch'" v-model="record.configExecutors" valuefield="id" textfield="name" @click="handConfigUsers(record)"  :showclose="false">
                  <EditOutlined />
                </rx-text-list>
              </template>
              <template v-else-if="column.key === 'operateExecutors'">
                <rx-text-list v-if="record.status=='init' && record.multiInstance!='batch'" v-model="record.operateExecutors" valuefield="id" textfield="name" @change="changeExecutors($event,record,'operateExecutors')" @click="handExecutors(record,'operateExecutors')" >
                  <UserOutlined />
                </rx-text-list>
                <a-tag v-else-if="record.status=='init' && record.multiInstance=='batch'"  v-for="item in record.operateExecutors">{{item.name}}</a-tag>
              </template>
              <template v-else-if="column.key === 'checkExecutors'">
                <rx-text-list v-if="record.status=='runing' && record.multiInstance!='batch'" v-model="record.runExecutors" textfield="name" @change="changeExecutors($event,record,'runExecutors')"  @click="handExecutors(record,'runExecutors')" >
                  <UserOutlined />
                </rx-text-list>
                <a-tag v-else-if="record.status=='runing' && record.multiInstance=='batch'"  v-for="item in record.runExecutors">{{item.name}}</a-tag>
                <a-tag v-else v-for="item in record.checkExecutors">{{item.name}}</a-tag>
              </template>
              <template v-else-if="column.key === 'jumpCol'">
                <a-dropdown v-if="record.status=='runing' && record.multiInstance!='batch'">
                  <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                    {{i18n('jumpTo','跳至')}} <DownOutlined />
                  </a>
                  <template #overlay>
                    <a-menu>
                      <template v-for="tNode in taskAllNodeUsers">
                        <a-menu-item :key="tNode.nodeId" v-if="tNode.nodeId!=record.nodeId">
                          <a @click="jumpToNode(record,tNode)">{{tNode.nodeText}}</a>
                        </a-menu-item>
                      </template>
                    </a-menu>
                  </template>
                </a-dropdown>
              </template>
              <template v-else-if="column.key === 'status'">
                <a-tag :color="statusMap[text].color">
                  <span>{{statusMap[text].text}}</span>
                </a-tag>
              </template>
            </template>
          </a-table>
        </template>
    </rx-fit>
</template>

<script>
import BpmInstApi from '@/common/api/bpm/bpmInst';
import BpmDefApi from "@/common/api/bpm/bpmDef";
import BpmNodeJump from './BpmNodeJump.vue';
// import {RxDialog,Util,RxFit,RxTextList} from '@lowcode/jpaas-base-lib';
import {RxDialog,Util,RxFit} from '@lowcode/jpaas-base-lib';
import {ShareDialog} from '@lowcode/jpaas-share-component';
export default {
    name: "BpmInstUsers",
    props:{
        actInstId:String,
        defId:String,
        container:Object,
        layerid: String,
        lydata: Object,
        destroy:Function
    },
    emits:["subCloseWindow"],
    components:{
        RxDialog,
        RxFit,
        // RxTextList,
    },
    data(){
        return {
            taskAllNodeUsers:[],
            statusMap: {
                init: { color: 'blue', text: this.i18n('notStart','未开始') },
                runing: { color: 'green', text: this.i18n('operation','运行中') }, //运行
                finish: { color: 'red', text: this.i18n('complete','完成') }, //运行

            },
            taskNodeUsers:[],
            taskNodeUserColumns: [
                {
                    title: this.i18n('form.nodeName','节点名'),
                    dataIndex: 'nodeText',
                    key: 'nodeText',
                    width:100,

                }, {
                    title: this.i18n('form.staffing','人员配置'),
                    dataIndex: 'configExecutors',
                    key: 'configExecutors',
                    width:150,
                    scopedSlots: {customRender: 'configExecutors'}
                },
                {
                    title: this.i18n('form.interStaff','干预人员配置'),
                    dataIndex: 'operateExecutors',
                    key: 'operateExecutors',
                    width:150,
                    scopedSlots: {customRender: 'operateExecutors'}
                },
                {
                    title: this.i18n('form.approver','审批人'),
                    dataIndex: 'checkExecutors',
                    key: 'checkExecutors',
                    width:160,
                    scopedSlots: {customRender: 'checkExecutors'}
                },{
                    title: this.i18n('form.jump','跳转'),
                    dataIndex: 'checkExecutors',
                    key:'jumpCol',
                    width:80,
                    scopedSlots: {customRender: 'jumpCol'}
                },
                {
                    title: this.i18n('form.status','状态'),
                    dataIndex: 'status',
                    key:'status',
                    width:80,
                    scopedSlots: {customRender: 'status'}
                }

            ],

        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"bpmInst",key);
        },
        init(){
            let self_=this;
            BpmInstApi.getTaskNodeUsers(this.actInstId,"YES","").then(taskNodeUsers=>{
                self_.taskAllNodeUsers=taskNodeUsers;
                self_.taskNodeUsers=[];
                taskNodeUsers.forEach(item=>{
                    if(!item.endNode){
                        self_.taskNodeUsers.push(item);
                    }
                })
            });
        },
        changeExecutors(data,record,type){
            if(data.length==0){
                return;
            }

            var userIds=data.filter(item=>{
                return item.type=="user";
            }).map(item=>{
                return item.id;
            });
            var groupIds=data.filter(item=>{
                return item.type=="group";
            }).map(item=>{
                return item.id;
            })

            var self=this;
            //更改干预执行人
            if(type=='operateExecutors'){
                BpmInstApi.updateOperatorNodeUser({
                    actInstId:self.actInstId,
                    nodeId:record.nodeId,
                    userIds:userIds.join(','),
                    groupIds:groupIds.join(',')
                });
            }
            //更改执行用户
            else if(type=='runExecutors'){
                BpmInstApi.updateRunningNodeUser({
                    actInstId: self.actInstId,
                    nodeId: record.nodeId,
                    userIds: userIds.join(','),
                    groupIds:groupIds.join(',')
                });
            }
        },
        handExecutors(record,type){
            let _data = record[type].filter(item=>{
                return item.type=='user';
            }).map(item=>{
                return {
                    fullName:item.name,
                    userId:item.id
                }
            })
            var conf = {
                curVm: this,
                data: {
                    single: false,
                    data: _data
                },
                widthHeight: ['1024px', '600px']
            };
            var self=this;
            ShareDialog.openUserDialog(conf, function (users) {
                var ary=record[type].filter(item=>{
                    return item.type=='group';
                });
                for (var i = 0; i < users.length; i++) {
                    var obj = users[i];
                    var o={name:obj.fullName,"type": "user","id": obj.userId};
                    ary.push(o);
                }
                record[type]=ary;
                self.changeExecutors(ary,record,type);
            });
        },


        handConfigUsers(record){
            let url=BpmDefApi.designBaseUrl+'?defId=' + this.defId;
            window.open(url);
        },
        //跳至本节点
        jumpToNode(record,tNode){
            let self=this;
            Util.open({
                component:BpmNodeJump,
                curVm:this,
                widthHeight:['800px','500px'],
                title: self.i18n('form.jumpNode','跳至节点') + '-'+ record.nodeText,
                data:{
                    actInstId:record.actInstId,
                    nodeId:record.nodeId,
                    nodeText:record.nodeText,
                    taskId:record.taskId,
                    destNodeId:tNode.nodeId,
                    destNodeText:tNode.nodeText,
                    isEndNode:tNode.endNode
                }
            },function(action){
                if(action=="ok"){
                    if(tNode.endNode){
                        self.$emit("subCloseWindow","ok");
                        return;
                    }
                    self.init();
                }
            });
        },

    },
    watch:{
        actInstId:function (val,oldVal) {
            if(val){
                this.init();
            }
        }
    }
}
</script>

<style scoped>

</style>
